<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#f1f1f1" :fullscreen="true">
		<view class="page-card animate__animated animate__fadeIn">
			<view class="banner">
				<image class="img" src="/static/images/banner1.jpg" mode="aspectFill"></image>
				<image
					class="close"
					@click="router.back()"
					src="/static/images/iconclose.png"
					mode="aspectFill"
				></image>
				<view class="info flex align-center">
					<image class="avatar" src="/static/images/avatar.jpg" mode="aspectFill"></image>
					京QKIT36
				</view>
			</view>
			<view class="content">
				<view class="qrcode mb30 flex flex-center">
					<image class="img" src="/static/images/qrcode.jpg" mode="aspectFill"></image>
				</view>
				<view class="photo mb30 flex flex-center align-center">
					<image class="img" src="/static/images/banner1.jpg" mode="aspectFill"></image>
					<image
						class="img"
						style="margin: 0 30rpx"
						src="/static/images/banner2.jpg"
						mode="aspectFill"
					></image>
					<image class="img" src="/static/images/guanggao2.png" mode="aspectFill"></image>
				</view>
				<view class="serve mb30 flex flex-center align-center">
					<view class="item flex flex-center flex-column">
						<image class="icon" src="/static/images/car1.png" mode="aspectFill" />
						{{ $t("user.card.refuel") }}
					</view>
					<view class="item flex flex-center flex-column">
						<image class="icon" src="/static/images/car2.png" mode="aspectFill" />
						{{ $t("user.card.washing") }}
					</view>
					<view class="item flex flex-center flex-column">
						<image class="icon" src="/static/images/car3.png" mode="aspectFill" />
						{{ $t("user.card.driving") }}
					</view>
				</view>
				<view class="carinfo mb30">
					<view class="header flex align-center">
						<view class="icon">{{ $t("user.card.cicon") }}</view>
						<view class="title">{{ $t("user.card.carinfo") }}</view>
					</view>
					<view class="center flex">
						<view class="left flex flex-column flex-center">
							<view class="title">{{ $t("user.card.car") }}</view>
							<view class="num">0</view>
						</view>
						<view class="right flex flex-column">
							<image
								class="img"
								src="/static/images/falali.png"
								mode="aspectFill"
							></image>
							<view class="texto">{{ $t("user.card.accident") }}</view>
							<view class="flex flex-between textt align-center">
								<view>{{ $t("user.card.deduction") }}</view>
								<view class="flex flex-end"
									><view class="texts">6 </view>{{ $t("user.card.points") }}</view
								>
							</view>
							<view class="flex flex-between textt align-center">
								<view>{{ $t("user.card.fine") }}</view>
								<view class="flex flex-end"
									><view class="texts">1000 </view>{{ $t("user.card.rmb") }}</view
								>
							</view>
						</view>
					</view>
					<view class="footer"> {{ $t("user.card.look") }} </view>
				</view>
				<view class="insurance mb30">
					<view class="header flex align-center">
						<view class="icon" style="background-color: #ff8400">{{
							$t("user.card.iicon")
						}}</view>
						<view class="title">{{ $t("user.card.insurance") }}</view>
					</view>
					<view class="center flex flex-column flex-center">
						<view class="day flex flex-end"
							><view class="font">328</view>{{ $t("user.card.day") }}</view
						>
						<view class="date"> {{ $t("user.card.insuranceday") }}：2019-11-08 </view>
						<view class="text"> {{ $t("user.card.alert") }} </view>
					</view>
				</view>
				<view class="insurance">
					<view class="header flex align-center">
						<view class="icon" style="background-color: #2fc31c">{{
							$t("user.card.aicon")
						}}</view>
						<view class="title">{{ $t("user.card.annual") }}</view>
					</view>
					<view class="center flex flex-column flex-center">
						<view class="day flex flex-end"
							><view class="font">328</view>{{ $t("user.card.day") }}</view
						>
						<view class="date"> {{ $t("user.card.annualday") }}：2019-11-08 </view>
						<view class="text"> {{ $t("user.card.alert") }}</view>
					</view>
				</view>
			</view>
			<Serve></Serve>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import Serve from "@/components/serve.vue";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { cache } = useStore();
const index = ref(0);
const app = useApp();
const ui = useUi();
const banner = ref([{ url: "/static/images/banner1.jpg" }, { url: "/static/images/banner2.jpg" }]);
</script>

<style lang="scss" scoped>
.page-card {
	padding-bottom: 30rpx;
	.banner {
		width: 100%;
		height: 758rpx;
		position: relative;
		.img {
			width: 100%;
			height: 100%;
		}
		.info {
			position: absolute;
			left: 30rpx;
			bottom: 30rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border: 4rpx solid #fff;
				border-radius: 50%;
				margin-right: 30rpx;
			}
		}
		.close {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: 30rpx;
			top: 50rpx;
		}
	}
	.content {
		padding: 30rpx;
		.qrcode {
			width: 100%;
			height: 690rpx;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.1);
			border-radius: 20rpx;
			.img {
				width: 432rpx;
				height: 432rpx;
			}
		}
		.photo {
			.img {
				flex: 0 0 210rpx;
				height: 140rpx;
				border-radius: 20rpx;
			}
		}
		.serve {
			width: 100%;
			height: 180rpx;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.1);
			border-radius: 20rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			.item {
				flex: 0 33.3333%;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				.icon {
					width: 60rpx;
					height: 50rpx;
					margin-bottom: 20rpx;
				}
			}
		}
		.header {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e5e5e5;
			.icon {
				width: 60rpx;
				height: 60rpx;
				background: #0c81f7;
				border-radius: 50%;
				line-height: 60rpx;
				text-align: center;
				margin-right: 20rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #ffffff;
			}
			.title {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 38rpx;
				color: #333333;
			}
		}
		.carinfo {
			width: 100%;
			height: 640rpx;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.1);
			border-radius: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			.center {
				height: 440rpx;
				.left {
					flex: 0 0 50%;
					padding-top: 20rpx;
					.title {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
					.num {
						width: 200rpx;
						height: 200rpx;
						border-radius: 50%;
						border: 8px solid rgba(12, 129, 247, 0.2);
						line-height: 200rpx;
						text-align: center;
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 93rpx;
						color: #0c81f7;
						margin-top: 75rpx;
					}
				}
				.right {
					flex: 0 0 50%;
					box-sizing: border-box;
					padding: 0 50rpx;
					.img {
						width: 237rpx;
						height: 103rpx;
						margin-top: 40rpx;
					}
					.texto {
						text-align: center;
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 32rpx;
						color: #1284f7;
						margin-top: 30rpx;
					}
					.textt {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						margin-top: 50rpx;
						.texts {
							font-family: PingFangSC;
							font-weight: 400;
							font-size: 32rpx;
							color: #333333;
						}
					}
				}
			}
			.footer {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #aaaaaa;
				text-align: center;
				width: 100%;
				border-top: 1rpx solid #e5e5e5;
				line-height: 100rpx;
			}
		}
		.insurance {
			width: 100%;
			height: 500rpx;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.1);
			border-radius: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			.center {
				.day {
					padding: 70rpx 0;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					.font {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 80rpx;
						color: #1284f7;
						line-height: 80rpx;
					}
				}
				.date {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}
				.text {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 24rpx;
					color: #aaaaaa;
					margin-top: 60rpx;
				}
			}
		}
	}
}
</style>
